<template>
	<!-- 账单 -->
	<view class="page">
		<mescroll-uni @getData="getData" ref="mescroll" top="0">
			<block slot="list">
				<view class="bill-group" v-if="dataList.length!=0">
					<view class="bill-item" v-for="(item,index) in dataList" :key="index">
						<view class="bill-msg">
							<image :src="$util.img('/upload/uniapp/fenxiao/bill/jiesuan.png')" mode="aspectFill"></image>
							<view class="bill-detail">
								<text class="bill-name">{{item.cl_name}}</text>
								<text class="bill-Serial">账单编号:<text>{{item.account_no}}</text></text>
								<text class="bill-time">{{ $util.timeStampTurnTime(item.create_time) }}</text>
							</view>
						</view>
						<text class="add-num">+{{item.money}}</text>
					</view>
				</view>
				<view class="none_data" v-if="dataList.length==0">
					<image :src="$util.img('/upload/uniapp/common-empty.png')" mode="widthFix"></image>
					<text>暂无账单数据</text>
				</view>
			</block>
		</mescroll-uni>
		<loading-cover ref="loadingCover"></loading-cover>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				dataList: [],
				token: '',
				cl_id: ''
			}
		},
		onLoad(option) {
			uni.setNavigationBarTitle({
			    title: '我的账单'
			});
			if (option.cl_id) this.cl_id = option.cl_id
			if (!uni.getStorageSync('token')) {
				this.$refs.login.open('/pages/member/index/index');
			} else {
				this.token = uni.getStorageSync('token')
			}
			setTimeout(() => {
				this.$refs.loadingCover.hide();
			}, 2000)
		},
		methods: {
			getData(mescroll) {
				this.mescroll = mescroll
				this.$api.sendRequest({
					url: '/api/community/account',
					data: {
						page: mescroll.num,
						size: mescroll.size,
						token: this.token,
						// site_id: this.$config.siteId,
						cl_id: this.cl_id
					},
					success: res => {
						let newArr = [];
						let msg = res.message;
						if (res.code == 0 && res.data) {
							newArr = res.data.list;
						} else {
							this.$util.showToast({
								title: msg
							});
						}
						mescroll.endSuccess(newArr.length);
						//设置列表数据
						if (mescroll.num == 1) this.dataList = []; //如果是第一页需手动制空列表
						this.dataList = this.dataList.concat(newArr); //追加新数据
						if (this.$refs.loadingCover) this.$refs.loadingCover.hide();
					},
					fail: res => {
						mescroll.endErr();
						if (this.$refs.loadingCover) this.$refs.loadingCover.hide();
					}
				});
			},
		}
	}
</script>

<style lang="scss">
	.page {
		.bill-item {
			display: flex;
			align-items: flex-start;
			justify-content: space-between;
			padding: $padding;
			margin: $margin-both;
			background-color: white;
			border-radius: $border-radius;

			.bill-msg {
				display: flex;
				align-items: flex-start;

				image {
					margin-top: 10rpx;
					width: 60rpx;
					height: 60rpx;
					border-radius: 50%;
				}

				.bill-detail {
					margin-left: 10rpx;
					display: flex;
					flex-direction: column;
					align-items: flex-start;

					.bill-name {
						color: $color-title;
						font-size: $font-size-base;
					}

					.bill-Serial {
						color: $color-sub;
						font-size: 24rpx;
					}

					.bill-time {
						color: $color-sub;
						font-size: 24rpx;
					}
				}
			}

			.add-num {
				font-size: 30rpx;
				color: #34C25D;
			}
		}

		.none_data {
			display: flex;
			align-items: center;
			justify-content: center;
			flex-direction: column;

			image {
				margin-top: 100rpx;
				width: 350rpx;
				height: 300rpx;
				margin-bottom: 120rpx;
			}

			text {
				font-size: $font-size-sub;
				color: $color-tip;
			}
		}
	}
</style>
